<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>AutoExpander Options</title>
	<style type="text/css">
	    body { color: #404040; font-size: 14px; font-family: Helvetica, Arial, sans-serif; }
	    .main { width: 750px; margin: 20px auto 0; }
	    h1 { font-size: 24px }
	    h3 { margin: 1.2em 0 0.5em; font-size: 14px; padding: 2px 1em; background-color: #e5ecf9; border-top: 1px solid #36c; }
	    p { margin: 0 1em 10px; }
	    .pref_shorterners textarea { width: 100%; height: 200px; }
	    .check-msg { font-size: 12px; }
	    .check-msg strong { font-size: 16px; }
	    .check-msg span { display: block; }
	    .submit { text-align: center; }
	    .submit button { padding: 6px; font-size: 14px; width: 200px; }
	</style>
</head>
<body onload="restore_options();">
    <script type="text/javascript" src="helper.js"></script>
    <script type="text/javascript" src="options.js"></script>
    <script type="text/javascript">
        function save_options() {
            AE.OptionsHelper.save(document);
            window.close();
        }

        function restore_options() {
            AE.OptionsHelper.restore(document);
            document.getElementById("check_expander_msg").innerHTML = "";
        }

        function check_available() {
            var el = document.getElementById("pref_expander");
            var expander = el.options[el.selectedIndex].value;
            AE.OptionsHelper.checkAvailable(expander, document.getElementById("check_expander_msg"));
        }

        function check_all() {
            AE.OptionsHelper.checkAll(document.getElementById("check_expander_msg"));
        }
    </script>
    <div class="main">
        <h1>AutoExpander Options</h1>
        <h3>Select an Expander</h3>
        <p>Please select which expander you want to use.</p>
        <p>
            Use Expander :
            <select id="pref_expander">
            </select>
            <button onclick="check_available();">Check available</button>
            <button onclick="check_all();">Check all</button>
        </p>
        <p id="check_expander_msg" class="check-msg"></p>
        <h3>Url Shorterners</h3>
        <p>Please input the url shorterners which will be auto expanded below, one shorterner per line.</p>
        <p>For example:</p>
        <blockquote>
            bit.ly<br />
            tinyurl.com
        </blockquote>
        <p class="pref_shorterners"><textarea id="pref_shorterners"></textarea></p>
        <p class="submit"><button onclick="save_options();">Save & Close</button></p>
    </div>
</body>
</html>
